<script setup>
import {onBeforeMount, ref} from 'vue';
import axios from 'axios';
import {httpUrl} from '../../main.js';
import Papa from "papaparse";
import {Search} from "@element-plus/icons-vue";

const currentPage = ref(1);
const pageSize = ref(17);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const total = ref(0);
const tableData = ref();
const no = ref("");
const handleSizeChange = (val) => {
  console.log(`每页${val}条`);
  currentPage.value = 1;
  pageSize.value = val;
  loadPost();
};

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
  loadPost();
};

const resetParam = () => {
  currentPage.value = 1;
  no.value = '';
  loadPost();
};
const loadPost = async () => {
  try {
    axios.post(httpUrl + '/countProduct/listPage', {
      pageSize: pageSize.value,
      pageNum: currentPage.value,
      param: {
        no: no.value,
      }
    }).then((res) => res.data).then((res) => {
      console.log(res);
      if (res.code == 200) {
        tableData.value = res.data;
        total.value = res.total;
      } else {
        alert('获取数据失败');
      }
    });
  } catch (error) {
    console.log(error);
  }
};
const exportCsv = () => {
  const header = {
    "no" : "商品编号",
    "name" : "商品名称",
    "inprice" : "进价",
    "innum" : "采购数量",
    "inallprice" : "采购总价",
    "outprice" : "售价",
    "outnum" : "销售数量",
    "outallprice" : "销售总价",
    "wages" : "利润",
    "existsnum" : "库存"
  };
  export_csv(header, tableData.value);

  function export_csv(header, data) {
    let list = [];
    for (let i in data) {
      let item = data[i];
      let obj = {};
      for (let key in header) {
        let title = header[key];
        let value = item[key];
        obj[title] = value;
      }
      list.push(obj);
    }

    var csv = Papa.unparse(list);
    let content = new Blob(['\uFEFF' + csv]);
    let urlObject = window.URL || window.webkitURL || window;
    let url = urlObject.createObjectURL(content);
    let el = document.createElement("a");
    el.href = url;
    el.download = "销售表.csv";
    el.click();
    urlObject.revokeObjectURL(url);
  }
};

onBeforeMount(async () => {
  await loadPost();
});
</script>

<template>
  <div class="main" style="height: 824px">
    <div style="margin: 5px">
      <el-input v-model="no" placeholder="请输入商品编号" :suffix-icon="Search" style="width: 200px"
                @keyup.enter.native="loadPost"></el-input>
      <el-button type="danger" style="margin-left: 5px" @click="resetParam">重置</el-button>
      <el-button type="info" style="margin-left: 5px" @click="exportCsv">导出为CSV文件</el-button>
    </div>
    <el-table :data="tableData" :header-cell-style="{ background: '#f3f6fd', color: '#555' }" :border="true">
      <el-table-column prop="no" label="商品编号"></el-table-column>
      <el-table-column prop="name" label="商品名称"></el-table-column>
      <el-table-column prop="inprice" label="进价"></el-table-column>
      <el-table-column prop="innum" label="采购数量"></el-table-column>
      <el-table-column prop="inallprice" label="采购总价"></el-table-column>
      <el-table-column prop="outprice" label="售价"></el-table-column>
      <el-table-column prop="outnum" label="销售数量"></el-table-column>/
      <el-table-column prop="outallprice" label="销售总价"></el-table-column>
      <el-table-column prop="wages" label="利润"></el-table-column>
      <el-table-column prop="existsnum" label="库存"></el-table-column>
    </el-table>
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[17]" :small="small"
                   :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
                   :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   style="bottom: 20px; position: fixed; margin-left: 5px; z-index: 2"/>
  </div>
</template>

<style scoped>

</style>